<!-- 导师申请 -->
<template>
    <el-container>
        <el-header height="">
            <el-row :gutter="0">
                <el-col>
                    <p class="section-title">导师申请</p>
                </el-col>
            </el-row>
        </el-header>
        <el-main style="padding-top:0">
            <el-row class="bg-white pd-12px" :style="showStyle">
                <el-col>
                    <el-row style="margin:10px 0">
                        <el-col :span=4>
                            <span><img :src="teacherInfo.face" width="120" height="150"></span>
                        </el-col>
                        <el-col :span=20>
                            <el-row style="margin:10px 0">
                                <!-- <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">工号：</label>
                                        <span class="majoy-text">{{teacherInfo.teacherId}}</span>
                                    </div>
                                </el-col> -->
                                <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">姓名：</label>
                                        <span class="majoy-text">{{teacherInfo.name}}</span>
                                    </div>
                                </el-col>
                                <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">性别：</label>
                                        <span class="majoy-text">{{teacherInfo.sex}}</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin:20px 0">
                                <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">职称：</label>
                                        <span class="majoy-text">{{teacherInfo.title}}</span>
                                    </div>
                                </el-col>
                                <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">学院：</label>
                                        <span class="majoy-text">{{teacherInfo.department}}</span>
                                    </div>
                                </el-col>
                                <el-col :span=8>

                                </el-col>
                            </el-row>
                            <el-row style="margin:20px 0">
                                <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">专业：</label>
                                        <span class="majoy-text">{{teacherInfo.subject}}</span>
                                    </div>
                                </el-col>
                                <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">计划人数</label>
                                        <span class="majoy-text">{{teacherInfo.planNum}}</span>
                                    </div>
                                </el-col>
                                <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">实际人数</label>
                                        <span class="majoy-text">{{teacherInfo.actNum}}</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin:20px 0">
                                <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">办公室电话</label>
                                        <span class="majoy-text">{{teacherInfo.officePhone}}</span>
                                    </div>
                                </el-col>
                                <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">联系方式：</label>
                                        <span class="majoy-text">{{teacherInfo.telPhone}}</span>
                                    </div>
                                </el-col>
                                <el-col :span=8>
                                    <div class="item-group">
                                        <label class="secondary-text">联系邮箱：</label>
                                        <span class="majoy-text">{{teacherInfo.email}}</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span=24>
                                    <div class="item-group">
                                        <div class="float-left">
                                            <label class="secondary-text">导师简介：</label>
                                        </div>
                                        <div class="float-left">
                                            <label class="majoy-text">{{teacherInfo.introduce}}</label>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-row class="bg-white pd-12px">
                        <el-col :span="6">
                            <el-input type="text" v-model="queryForm.teacherId" placeholder="姓名" size="mini" @keyup.enter.native="filter">
                                <i class="el-icon-search" slot="suffix" style="margin-top:7px;cursor: pointer;" @click="filter">
                                </i>
                            </el-input>
                        </el-col>
                        <el-col :span="18"></el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-table :data="teachers" size="mini" @expand-change="expandChange" ref="teacherTable">
                                <el-table-column type="expand" width="55">
                                    <template slot-scope="props">
                                        <el-form label-position="right" inline class="edu-row-expand-4" label-width="90px">
                                            <el-row>
                                                <el-col :span="4">
                                                    <el-form-item label="照片">
                                                        <span><img :src="props.row.face" width="120" height="150" /></span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="20">
                                                    <el-row :gutter="0">
                                                        <el-col :span="8">
                                                            <el-form-item label="姓名">
                                                                <span>{{ props.row.name }}</span>
                                                            </el-form-item>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <el-form-item label="性别">
                                                                <span>{{props.row.sex}}</span>
                                                            </el-form-item>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <el-form-item label="邮箱">
                                                                <span>{{ props.row.email }}</span>
                                                            </el-form-item>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row :gutter="0">
                                                        <el-col :span="8">
                                                            <el-form-item label="职称">
                                                                <span>{{props.row.title}}</span>
                                                            </el-form-item>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <el-form-item label="学院">
                                                                <span>{{ props.row.department }}</span>
                                                            </el-form-item>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <el-form-item label="专业">
                                                                <span>{{props.row.subject}}</span>
                                                            </el-form-item>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row :gutter="0">
                                                        <el-col :span="8">
                                                            <el-form-item label="计划人数">
                                                                <span>{{ props.row.planNum }}</span>
                                                            </el-form-item>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <el-form-item label="实际人数">
                                                                <span>{{ props.row.actNum }}</span>
                                                            </el-form-item>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <el-form-item label="备注">
                                                                <span>{{props.row.remark}}</span>
                                                            </el-form-item>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row :gutter="0">
                                                        <el-col :span="8">
                                                            <el-form-item label="办公电话">
                                                                <span></span>
                                                            </el-form-item>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <el-form-item label="电话">
                                                                <span></span>
                                                            </el-form-item>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row :gutter="0">
                                                        <el-col :span="24">
                                                            <el-form-item label="导师简介">
                                                                <span>{{ props.row.introduce }}</span>
                                                            </el-form-item>
                                                        </el-col>
                                                    </el-row>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </template>
                                </el-table-column>
                                <el-table-column label="姓名" width="120">
                                    <template slot-scope="props">
                                        <span style="cursor:pointer" @click="handleExpansion(props.row)">{{props.row.name}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="性别" width="90">
                                    <template slot-scope="props">
                                        {{props.row.sex}}
                                    </template>
                                </el-table-column>
                                <el-table-column label="职称">
                                    <template slot-scope="props">
                                        <el-popover placement="bottom-start" width="200" trigger="hover" :content="props.row.title">
                                            <span slot="reference">{{props.row.title}}</span>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column label="学院">
                                    <template slot-scope="props">
                                        <el-popover placement="bottom-start" width="200" trigger="hover" :content="props.row.department">
                                            <span slot="reference">{{props.row.department}}</span>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column label="专业">
                                    <template slot-scope="props">
                                        <el-popover placement="bottom-start" width="200" trigger="hover" :content="props.row.subject">
                                            <span slot="reference">{{props.row.subject}}</span>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column label="计划人数" width="95">
                                    <template slot-scope="props">
                                        {{props.row.planNum}}
                                    </template>
                                </el-table-column>
                                <el-table-column label="实际人数" width="95">
                                    <template slot-scope="props">
                                        {{props.row.actNum}}
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注">
                                    <template slot-scope="props">
                                        <el-popover placement="bottom-start" width="200" trigger="hover" :content="props.row.remark">
                                            <span slot="reference">{{props.row.remark}}</span>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="120">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="handleShowDialog(scope.row)" size="mini">{{btnText}}</el-button>
                                        <el-button type="text" @click="handleExpansion(scope.row)" size="mini">详情</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>

                    <el-row :gutter="0" class="bg-white pd-12px">
                        <el-col>
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.pageNum_" :page-size="queryForm.pageSize_" layout="total, prev, pager, next" :total="queryForm.total" style="float: right;margin:10px 60px 0 0;">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-dialog title="申请导师" width="350px" :visible.sync="showApplyDialog">
                <el-row>
                    <el-col style="text-align:center">您是否确认申请
                        <span style="color:red">[{{currentApplyRow.name}}]</span>导师？</el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div style="float:right;margin-top:25px">
                            <el-button size="mini" @click="handleCancelDialog">取消</el-button>
                            <el-button type="primary" @click="handleConfirmDialog" size="mini">确认</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-dialog>
        </el-main>
    </el-container>
</template>
<script>
import { mapState, mapActions } from "vuex";
import {
    findAllStudentList,
    addStudentTeacherMap,
    findTeacherById,
    getImageData
} from "common/src/api/teacherinfo";
import {
    queryApplyStatusByStudentId,
    findTeacherListByStudentId
} from "common/src/api/welcomeService/studentTeacherApply";

//发布状态，0：待发布 1.已发布 2.可查看联系方式
const APPLY_TYPE = {
    NO_PULISH: 0,
    APPLY: 1,
    ENABLE_READ: 2
};
const COLUMN_WIDTH = 120;
export default {
    name: "TeacherApply",
    data() {
        return {
            showApplyDialog: false,
            currentApplyRow: {
                name:""
            }, //当前申请导师行数据
            btnText: "",
            isFinished: false, //是否完成申请信息查询
            status: APPLY_TYPE.NO_PULISH,
            showStyle: {
                display: "none"
            },
            teacherInfo: {
                teacherId: ""
            },
            queryForm: {
                studentId: "",
                teacherId: "",
                total: 0,
                pageSize_: 20,
                pageNum_: 1
            },
            teachers: []
        };
    },
    computed: {
        ...mapState({
            mockUser: state => state.session.mockUser
        })
    },
    mounted: function() {
        queryApplyStatusByStudentId(this.getUser())
            .then(response => {
                if (response.code == 200) {
                    this.isFinished = true;
                    this.status = response.msg; //获取该学生的申请状态
                    //该状态时操作可见
                    if (this.status == APPLY_TYPE.APPLY && !response.data) {
                        this.btnText = "申请导师";
                    }
                    if (
                        response.data &&
                        this.status != APPLY_TYPE.ENABLE_READ
                    ) {
                        response.data.telPhone = "";
                        response.data.officePhone = "";
                    }
                    if (response.data) {
                        response.data.face = "";
                        this.teacherInfo = response.data;
                        this.showStyle.display = "";
                        this.showTeacherPhoto();
                    }
                    this.getTeacherList(true);
                } else {
                    throw "导师信息查询失败";
                }
            })
            .catch(err => {
                this.$message({
                    type: "error",
                    message: "导师信息查询失败"
                });
            });
    },
    methods: {
        getUser() {
            return this.mockUser
                ? this.mockUser.uid
                : localStorage.getItem("uid");
            // return (
            //     this.$store.state.session.mockUser ||
            //     this.$store.state.session.user ||
            //     JSON.parse(localStorage.getItem("user"))
            // );
        },
        filter: function() {
            this.getTeacherList(true);
        },
        getTeacherList(isGotoFirst = false, showMessage = false) {
            if (!this.isFinished) {
                return;
            }
            if (isGotoFirst) {
                this.queryForm.pageNum_ = 1;
            }
            this.queryForm.studentId = this.getUser();
            findTeacherListByStudentId(this.queryForm)
                .then(response => {
                    if (response.code == 200) {
                        if (this.status != APPLY_TYPE.ENABLE_READ) {
                            response.data.list.forEach(row => {
                                row.officePhone = "";
                                row.telPhone = "";
                            });
                        }
                        response.data.list.forEach(option => {
                            option.face = "";
                        });
                        this.teachers = response.data.list;
                        this.queryForm.total = response.data.total;
                    } else {
                        throw "查询导师列表失败";
                    }
                })
                .catch(error => {
                    this.$message({
                        type: "error",
                        message: "查询导师列表失败"
                    });
                });
        },
        //确认申请
        confirmApply(row) {
            //待发布不作操作
            if (this.status != APPLY_TYPE.APPLY) {
                return;
            }
            this.teacherId = row.teacherId;
            let uid = this.getUser();
            this.studentId = uid;
            if (this.teacherId && this.studentId) {
                this.handleApply(this.teacherId, this.studentId);
            }
        },
        //处理申请
        handleApply(teacherId, studentId) {
            let data = { teacherId, studentId };
            addStudentTeacherMap(data)
                .then(response => {
                    if (response.code == 200) {
                        this.$message({
                            type: "success",
                            message: "申请成功"
                        });
                        this.btnText = "";
                        this.getTeacherList();
                        findTeacherById(this.teacherId)
                            .then(response => {
                                if (response.code == 200) {
                                    this.showApplyDialog = false;
                                    if (this.status != APPLY_TYPE.ENABLE_READ) {
                                        response.data.telPhone = "";
                                        response.data.officePhone = "";
                                    }
                                    this.teacherInfo = response.data;
                                    this.showStyle.display = "";
                                    this.showTeacherPhoto();
                                }
                            })
                            .catch(err => {});
                    } else {
                        throw response.msg;
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$message({
                        type: "error",
                        message: "申请失败"
                    });
                });
        },
        showTeacherPhoto() {
            if (this.teacherInfo.photo) {
                getImageData(this.teacherInfo.photo)
                    .then(response => {
                        if (response.code == 200 && response.data) {
                            this.teacherInfo.face = response.data.base;
                        }
                    })
                    .catch(err => {
                        this.teacherInfo.face = "/static/images/icon_photo.png";
                    });
            }
        },
        expandChange(row, expandedRows) {
            let teacher = this.teachers.find(
                t => t.teacherId == row.teacherId && !t.hasImg
            );
            if (teacher) {
                if (!teacher.hasImg) {
                    teacher.hasImg = true;
                    teacher.face = "/static/images/icon_photo.png";
                    if (teacher.photo) {
                        getImageData(teacher.photo)
                            .then(response => {
                                if (response.code == 200 && response.data) {
                                    teacher.face = response.data.base;
                                }
                            })
                            .catch(err => {});
                    }
                }
            }
        },
        //处理更换申请
        handleChangeApply(teacherId, studentId) {
            let data = {
                teacherId: teacherId,
                studentId: studentId,
                oldTeacherId: this.teacherInfo.teacherId
            };
            updateStudentTeacherMap(data)
                .then(response => {
                    if (response.code == 200) {
                        this.$message({
                            type: "success",
                            message: "变更成功"
                        });
                        findTeacherById(teacherId)
                            .then(response => {
                                if (response.code == 200) {
                                    this.teacherInfo = response.data;
                                }
                            })
                            .catch(err => {});
                    } else {
                        throw response.msg;
                    }
                })
                .catch(error => {
                    this.$message({
                        type: "error",
                        message: "变更失败"
                    });
                });
        },
        //分页size改变
        handleSizeChange: function(val) {
            this.queryForm.pageSize_ = val;
            this.getTeacherList();
        },
        //分页变化
        handleCurrentChange: function(val) {
            this.queryForm.pageNum_ = val;
            this.getTeacherList();
        },
        handleExpansion(row) {
            this.$refs.teacherTable.toggleRowExpansion(row);
        },
        handleShowDialog(row) {
            this.currentApplyRow = row;
            this.showApplyDialog = true;
        },
        handleCancelDialog() {
            this.showApplyDialog = false;
        },
        handleConfirmDialog() {
            this.confirmApply(this.currentApplyRow);
        }
    }
};
</script>